<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 设置视口属性 -->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>海陵区电竞大赛报名</title>
  <script type="text/javascript">
    // 根据屏幕的宽度 来设置 html的 font-size
    // 设备的宽度
    console.log(window.screen.width);
    // 浏览器 可用的宽度
    // 移动端 用上下 两个都是可以
    console.log(window.screen.availWidth);
    // 计算 font-weight
    var fontSize = window.screen.availWidth / 20;
    document.querySelector('html').style.fontSize = fontSize + 'px';
    window.onresize = function () {
      // 计算 font-weight
      var fontSize = window.screen.availWidth / 20;
      document.querySelector('html').style.fontSize = fontSize + 'px';
    }
    // 跟媒体查询比 在移动端使用 没有优劣之分  
    // 面试问道 媒体查询 还有 js 都回答 即可
  </script>
</head>
  <style>
   dl{
      text-align:center;
      border:2px solid #008800;
      background-color:white;
      opacity:0.8;
      margin:5% 5% 0 0;
   }
   td {
        word-break : break-all;
   }
   body {
   		width:100%;
   		height:100%;
   		background-position: top center;
   		background-repeat: no-repeat;
   		background-attachment: fixed;
   		background-size: cover;
   		background-color: rgb(130,99, 177);
   }
  </style>
  <body>
<div id="regist_form">
<dl>
    <form action="" method="post">
    	
		<div class="">
				<table class="">
					<thead>
						<tr class="text-c">
							<th width="">队伍序号</th>
							<th width="">队长姓名</th>
							<th width="">年龄/性别</th>
							<th width="">学历</th>
							<th width="">手机/身份证/工作单位</th>
						</tr>
					</thead>
					<tbody>
					{volist name='list' id='vo'}
						<tr class="text-c">

							<td width="15%">{$vo.number}</td>
							<td width="15%">{$vo.name}</td>
							<td width="15%">
							{$vo.age}/
							{if condition="$vo.gender eq 0"} 女
							{else /} 男
							{/if}
							</td>
							<td>{$vo.education}</td>
							<td>{$vo.phone}/
								{$vo.identify}/
								{$vo.work}</td>

						</tr>
					{/volist}
					</tbody>
				</table>
			</div>

    </form>
</dl>
</div>
  </body>
</html>